<template>
    <div class="fl memberLeft">
        <div class="memberInfo">
            <div class="memberInfo-headerImg"><img src="../../../assets/images/headerImage.png"></div>
            <div class="memberInfo-tel">15788902210</div>
            <div class="memberInfo-already">
                <ul class="clearFix">
                    <li class="ma1" :class="{ already: isAlready[0] }">
                        <i class="icon iconfont icon-ic_personal_deposito"></i>
                        <div class="memberInfoTips" v-if="isAlready[0]">您未开通存管账户<router-link to="">开通</router-link></div>
                        <div class="memberInfoTips" v-else>您已开通存管账户<router-link to="">查看</router-link></div>
                    </li>
                    <li class="ma2" :class="{ already: isAlready[1] }">
                        <i class="icon iconfont icon-ic_personal_card"></i>
                        <div class="memberInfoTips" v-if="isAlready[1]">您未绑定银行卡<router-link to="">绑定</router-link></div>
                        <div class="memberInfoTips" v-else>您已绑定银行卡<router-link to="">查看</router-link></div>
                    </li>
                    <li class="ma3" :class="{ already: isAlready[2] }">
                        <i class="icon iconfont icon-ic_personal_password"></i>
                        <div class="memberInfoTips" v-if="isAlready[2]">您未设置交易密码<router-link to="">设置</router-link></div>
                        <div class="memberInfoTips" v-else>您已设置交易密码<router-link to="">查看</router-link></div>
                    </li>
                    <li class="ma3" :class="{ already: isAlready[3] }">
                        <i class="icon iconfont icon-ic_personal_certific"></i>
                        <div class="memberInfoTips" v-if="isAlready[3]">您未完成实名认证<router-link to="">认证</router-link></div>
                        <div class="memberInfoTips" v-else>您已完成实名认证<router-link to="">查看</router-link></div>
                    </li>
                    <li class="ma5" :class="{ already: isAlready[4] }">
                        <i class="icon iconfont icon-ic_personal_telphone"></i>
                        <div class="memberInfoTips">您已绑定手机<router-link to="">查看</router-link></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="memberNav">
            <el-menu :default-active="activeIndex">
                <el-menu-item index="1">
                    <router-link to="/member">
                        <i class="icon iconfont icon-ic_accountoverview"></i>账户总览
                    </router-link>

                </el-menu-item>
                <el-menu-item index="2">
                    <router-link to="/investrecord">
                        <i class="icon iconfont icon-ic_Investmentrecords"></i>投资记录
                    </router-link>
                </el-menu-item>
                <el-menu-item index="3">
                    <router-link to="/fundrecord">
                        <i class="icon iconfont icon-investment"></i>资金记录
                    </router-link>
                </el-menu-item>
                <el-menu-item index="4">
                    <router-link to="">
                        <i class="icon iconfont icon-ic_concessionarycar"></i>优惠卡券
                    </router-link>
                </el-menu-item>
                <el-menu-item index="5">
                    <router-link to="">
                        <i class="icon iconfont icon-ic_autonomousinvest"></i>自动投资
                    </router-link>
                </el-menu-item>
                <el-menu-item index="6">
                    <router-link to="">
                        <i class="icon iconfont icon-ic_invitescourtesy"></i>邀请有礼
                    </router-link>
                </el-menu-item>
                <el-menu-item index="7">
                    <router-link to="">
                        <i class="icon iconfont icon-ic_accountmanagemen"></i>账户管理
                    </router-link>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                activeIndex: '',
                isAlready: [true,true,true,true,false]
            }
        },
        created(){
            this.fetchData();
        },
        watch:{
            '$route': 'fetchData'
        },
        methods: {
            fetchData(){
                this.activeIndex = this.$route.name[1];
            }
        }
    }
</script>

<style lang="scss" scoped>
    .memberLeft{
        width: 270px;
        background: #fff;
        .memberInfo{
            padding: 50px 0;
            .memberInfo-headerImg{
                width: 90px;
                height: 90px;
                border-radius: 100%;
                overflow: hidden;
                margin: 0 auto;
                img{
                    display: block;
                    width: 100%;
                }
            }
            .memberInfo-tel{
                text-align: center;
                font-size: 16px;
                color: #333;
                padding: 10px 0 20px 0;
            }
            .memberInfo-already{
                width: 180px;
                margin: 0 auto;
                li{
                    width: 26px;
                    margin: 0 5px;
                    float: left;
                    position: relative;
                    cursor: pointer;
                    i{
                        font-size: 26px;
                        color: #d8d8d8;
                    }
                    div{
                        position: absolute;
                        left: -70px;
                        top: 36px;
                        z-index: 20;
                        background: #fffef6;
                        border: 1px solid #f5ea91;
                        font-size: 12px;
                        color: #333;
                        width: 140px;
                        padding: 0 10px;
                        height: 26px;
                        line-height: 26px;
                        display: none;
                        a{
                            color: #e95412;
                            position: absolute;
                            right: 10px;
                            top: 0;
                            z-index: 30;
                            &:hover{
                                font-weight: bold;
                            }
                        }
                        &:after{
                            content: ''; position: absolute; left: 50%; top: -8px; margin-left: -2px;
                            width: 0;
                            height: 0;
                            border-left: 5px solid transparent;
                            border-right: 5px solid transparent;
                            border-bottom: 8px solid #f6f6f6;
                        }
                    }
                    &:hover div{ display: block;}
                }
                li.ma1.already i{ color: #8db5eb;}
                li.ma2.already i{ color: #8ac3bd;}
                li.ma3.already i{ color: #85a0db;}
                li.ma4.already i{ color: #dfd295;}
                li.ma5.already i{ color: #8c99e4;}
            }
        }
    }
</style>
<style lang="scss">
    .memberNav{
        .el-menu{
            border: none;
        }
        .el-menu-item{
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            position: relative;
            a{
                display: block;
                width: 100%;
                color: #333;
                i{
                    margin-left: 40px;
                    margin-right: 20px;
                    font-size: 18px;
                    color: #666;
                }
            }
            &:hover{
                background: #f6f6f6;
            }
        }
        .el-menu-item.is-active{
            background: #f6f6f6;
            color: #333;
            i{
                color: #ee6c45;
            }
            &:after{
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 3px;
                background: #ee6c45;
                height: 100%;
            }
        }
    }
</style>